<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../note/jquery/jquery-3.4.1.js"></script>
</head>
    <style>
        body{
            text-align: center;
        }
        #warp{
            width: 820px;
            height: 540px;
            margin: 0 auto;
        }
        .box1{
            width: 260px;
            height: 170px;
            background-color: skyblue;
            margin: 4px;
            display: inline-block;
        }   
</style>
<body>
    <div id=warp>
        <div class="box1" id='i1'></div>
        <div class="box1" id='i2'></div>
        <div class="box1" id='i3'></div>
        <div class="box1" id='i4'></div>
        <div class="box1" id='i5'></div>
        <div class="box1" id='i6'></div>
        <div class="box1" id='i7'></div>
        <div class="box1" id='i8'></div>
        <div class="box1" id='i9'></div>
    </div>
    <script>
        // let xhr=new XMLHttpRequest();
        // let idname=['#i1','#i2','#i3','#i4','#i5','#i6','#i7','#i8','#i9'];
        // xhr.open('get','http://zhouxunwang.cn/data/?id=7&key=UO+T8dNmH4/+h5KN+4oyQG7HOgTgsJeZ/px1&name=fujian',true);
        // xhr.send()
        // xhr.onload= function(){
        //     let jsonData=JSON.parse(xhr.responseText);
        //     let citys=jsonData.city
        //     for(let i=0;i<9;i++){
        //         console.log(citys[i]['@attributes']);
        //         cityy=citys[i]['@attributes']
        //         $(`${idname[i]}`).html(`<p><h2>${cityy.cityname}</h2></p><p>${cityy.stateDetailed}</p><p>${cityy.tem1}~${cityy.tem2}</p><p>${cityy.windDir} ${cityy.windPower}</p>`)
        //     }
            
           
        // }
        let idname=['#i1','#i2','#i3','#i4','#i5','#i6','#i7','#i8','#i9'];
        $.ajax({
            url:'http://zhouxunwang.cn/data/?id=7&key=UO+T8dNmH4/+h5KN+4oyQG7HOgTgsJeZ/px1&name=fujian',
            async: true,
            type: 'GET',
            success:function(res){
                console.log(res)
                var citys=res.city
                for(let i=0;i<9;i++){
                    console.log(citys[i]['@attributes']);
                    cityy=citys[i]['@attributes']
                    $(`${idname[i]}`).html(`<p><h2>${cityy.cityname}</h2></p><p>${cityy.stateDetailed}</p><p>${cityy.tem1}~${cityy.tem2}</p><p>${cityy.windDir} ${cityy.windPower}</p>`)
                }
            }
        })
    </script>
</body>
</html>